<template>
  <f7-page>
    <f7-navbar :title="$t('m.tabs.tabsText.find')"></f7-navbar>

    <div class="top-swiper content-padding">
      <f7-swiper pagination :params="swiperParams">
        <f7-swiper-slide v-for="(item, index) in banners" :key="index">
          <img :src="item.pic" alt="">
        </f7-swiper-slide>
      </f7-swiper>
    </div>

    <f7-block-title>{{$t('m.tabs.service')}}</f7-block-title>
    <div class="content-padding">
      <card-one :title="$t('m.tabs.marketQuotation')" :subtitle="$t('m.tabs.marketQuotationSubTitle')" :media="require('../../static/hangqing-icon.png')" link="/quotes/"></card-one>

<!--      <card-one :title="$t('m.tabs.prepaidRecharge')" :subtitle="$t('m.tabs.prepaidRechargeSubTitle')" :media="require('../../static/huafei-icon.png')" link="/phone-recharge/"></card-one>-->
      <card-one :title="$t('m.tabs.z4')" subtitle="货币动向 实时掌握" :media="require('../../static/baipishu.png')" link @click="openUrl(5)"></card-one>
      <card-one :title="$t('m.tabs.information')" :subtitle="$t('m.tabs.informationSubTitle')" :media="require('../../static/zixun-icon.png')" link="/news/"></card-one>
      <card-one :title="$t('m.tabs.z1')" subtitle="交易记录 在线查询" :media="require('../../static/liulanqi-icon.png')" link @click="openUrl(1)"></card-one>
      <!--      <card-one title="Coinmarketcap" subtitle="货币动向 实时掌握" :media="require('../../static/avatar.jpg')" link @click="openUrl(2)"></card-one>-->
      <card-one :title="$t('m.tabs.z2')" subtitle="货币动向 实时掌握" :media="require('../../static/jinse-icon.png')" link @click="openUrl(3)"></card-one>
      <card-one :title="$t('m.tabs.z3')" subtitle="货币动向 实时掌握" :media="require('../../static/feixiaohao-icon.png')" link @click="openUrl(4)"></card-one>

      <!--<card-one :title="$t('m.tabs.c2cTransaction')" :subtitle="$t('m.tabs.c2cTransactionSubTitle')" :media="require('../../static/jiaoyi-icon.png')" link="/c2c-transaction/"></card-one>
      <card-one :title="$t('m.tabs.mall')" :subtitle="$t('m.tabs.mallSubTitle')" :media="require('../../static/mall-icon.png')" link="/mall/"></card-one>
      <card-one :title="$t('m.tabs.game')" :subtitle="$t('m.tabs.gameSubTitle')" :media="require('../../static/game-icon.png')" link="/game-list/"></card-one>-->

      <card-one :title="$t('m.tabs.c2cTransaction')" :subtitle="$t('m.tabs.c2cTransactionSubTitle')" :media="require('../../static/jiaoyi-icon.png')" @click="notOpen"></card-one>
      <card-one :title="$t('m.tabs.mall2')" :subtitle="$t('m.tabs.mallSubTitle')" :media="require('../../static/mall-icon.png')" @click="notOpen"></card-one>
      <card-one :title="$t('m.tabs.game')" :subtitle="$t('m.tabs.gameSubTitle')" :media="require('../../static/game-icon.png')" @click="notOpen"></card-one>


    </div>
    <!--<f7-block-title>工具</f7-block-title>
    <div class="content-padding">
      <card-one :title="$t('m.tabs.z1')" subtitle="交易记录 在线查询" :media="require('../../static/liulanqi-icon.png')" link @click="openUrl(1)"></card-one>
&lt;!&ndash;      <card-one title="Coinmarketcap" subtitle="货币动向 实时掌握" :media="require('../../static/avatar.jpg')" link @click="openUrl(2)"></card-one>&ndash;&gt;
      <card-one :title="$t('m.tabs.z2')" subtitle="货币动向 实时掌握" :media="require('../../static/jinse-icon.png')" link @click="openUrl(3)"></card-one>
      <card-one :title="$t('m.tabs.z3')" subtitle="货币动向 实时掌握" :media="require('../../static/feixiaohao-icon.png')" link @click="openUrl(4)"></card-one>

    </div>-->
  </f7-page>
</template>

<script>
  import CardOne from '../../ajComponents/card'
  import { getBanners } from "../../api/my";

  export default {
    name: "find",
    data () {
      return {
        swiperParams: {
          observer: true,
          observeParents: true,
          autoplay: {
            delay: 3000
          }
        },
        banners: []
      }
    },
    computed: {
      config() {
        return this.$store.getters.config.config;
      }
    },
    mounted() {
      if(this.$store.getters.token) this.initBanners();
    },
    watch: {
      '$store.getters.token'(value) {
        if(value) this.initBanners();
      }
    },
    methods: {
      initBanners() {
        getBanners({type: 1}).then(res => {
          this.banners = res.data;
        })
      },
      openUrl(type) {
        window.open(this.config['url'+ type])
      },
      notOpen() {
        this.$toast('暂未开放');
      }
    },
    components: {
      CardOne
    }
  }
</script>

<style scoped lang="scss">
  .top-swiper {
    height: 300px;
    margin-top: $padding;
    .swiper-container {
      background: #fff;
    }
    img {
      width: 100%;
    }
  }
</style>
